<template>
  <!--  中   -->
  <el-container>
    <el-header style="
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 999;
          padding: 0;
        ">
      <menu-bar></menu-bar>
    </el-header>

    <div style="width: 100% ; margin: 60px auto 0 auto; padding: 0;background-color: #f0f0f0">

      <div style="width: 90% ; margin: 20px auto ;">
        <el-page-header @back="goBack" content="文章详情">

        </el-page-header>
        <div style="width: 100% ; margin: 10px auto ; background-color: #FFFFFF;
                    padding-top: 30px">
          <!--  左      -->
          <!--  右      -->

          <span style="font-family: 华文仿宋;
                       display: block;
                       text-align: center;
                       font-size: 40px;
                       font-weight: bold;
                        ">{{ article.title }}</span>

          <el-divider></el-divider>

          <el-main>
            <el-row>
              <el-col :span="15">
                <div lang="en" style="width: 90%; margin: 0 auto" class="editor-content-view" id="articleContent">
                </div>
              </el-col>

              <el-col :span="9">
                <el-card style="margin: 0 10px">
                  <div slot="header" class="clearfix">

                    <el-row style="" type="flex" align="middle">
                      <el-col :span="4" >
                        <el-avatar :size="25" :src="article.avatar"></el-avatar>
                      </el-col>
                      <el-col :span="20" >
                  <span style="font-size: 14px; color: gray">
                        {{ article.nickname }}</span>
                      </el-col>

                    </el-row>

                    <el-row>
                      <div style="position: relative;margin-top: 10px">
                        <span style="font-size: 16px;line-height: 24px;height: 95px " class="contextSynopsis">{{
                            article.synopsis
                          }}</span>
                      </div>

                    </el-row>
                  </div>
                  <el-row type="flex" justify="end">
                    <el-col :span="16">

                      <span style="font-size: 14px">发布于:{{article.gmtCreate}}</span>
                    </el-col>

                      <el-col :span="4">

                          <span style="font-size: 14px">收藏量:{{article.collectCount}}</span>


                      </el-col>

                        <el-col :span="4">

                            <span style="font-size: 14px">点赞量:{{article.loveCount}}</span>

                        </el-col>
                  </el-row>

                </el-card>

                <div style="margin-top: 20px;margin-left: 10px">
                  <span style="margin: 0 20px; line-height: 36px; font-size: 20px">相关推荐</span>
                  <div v-loading="loading" v-for="article in articles" style="margin: 10px ;width: 92% ;">
                    <el-row type="flex" align="middle" :gutter="20" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                      <el-col :span="8">
                        <a :href="'/web/article?id=' +  article.id">
                          <el-image
                              style="width: 100%;margin: auto 0"
                              :src="article.cover"
                              fit="contain"></el-image>
                        </a>
                      </el-col>
                      <el-col :span="16" style="margin-top: 20px">
                        <el-row class="title" style="height: 27px;">
                          <el-link :href="'/article/detail?id=' + article.id + '&nid=' + article.nationId"
                                   style="font-weight:500;font-size: 18px"> {{ article.title }}
                          </el-link>
                        </el-row>
                        <el-row class="contextNation" style="min-height: 50px; margin-top: 8px;font-size: 14px;color:#676767;word-break: break-all;line-height: 28px;">
                          {{ article.synopsis }}
                        </el-row>
                        <el-row style="margin-top: 10px" type="flex" align="middle">
                          <el-col :span="4" style="margin-top: 8px">
                            <el-avatar :size="25" :src="article.avatar"></el-avatar>
                          </el-col>
                          <el-col :span="20" >
                  <span style="font-size: 14px; color: gray">
                        {{ article.nickname }}</span>
                          </el-col>

                        </el-row>

                      </el-col>

                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>

          </el-main>
          <el-divider></el-divider>
          <div style="width: 70%; margin: 0 auto">
            <!-- 点赞收藏分享条 -->
            <div style="margin-top: 10px; display: flex;justify-content: flex-end;">
              <el-button plain circle @click="pressLike()" v-if="!isPressedLike">
                <img src="/images/like.svg" width="28px"/>
              </el-button>
              <el-button circle @click="pressLike()" v-else>
                <img src="/images/like_press.svg" width="28px"/>
              </el-button>
              <el-button plain circle @click="pressCollect()" v-if="!isPressedCollect">
                <img src="/images/collect.svg" width="28px"/>
              </el-button>
              <el-button circle @click="pressCollect()" v-else>
                <img src="/images/collect_press.svg" width="28px"/>
              </el-button>
            </div>
          </div>
          <!-- 评论框 -->
          <div style="width: 70%;margin: 0 auto">
            <h3 style="margin: 20px 0; font-weight: 600">
              <i class="el-icon-collection-tag" style="margin-right: 2px"></i>评论
            </h3>
            <el-row>
              <el-col :span="2">
                <el-avatar :size="55" :src="user.avatar">
                </el-avatar>
              </el-col>
              <el-col :span="20">
                <el-input type="textarea" placeholder="请输入内容..." v-model="comment" maxlength="120" show-word-limit
                          style="font-size: 16px; width: 98%" resize="none">
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-button style="float: right; height: 60px; font-size: 16px" type="primary" @click="postComment(1)">
                  评论
                </el-button>
              </el-col>
            </el-row>
          </div>
          <!-- 评论内容 -->
          <el-empty v-if="comments.length == 0" description="该文章没有评论"></el-empty>
          <div v-else style="width: 70%;margin: 30px auto 0">
            <div v-for="c in comments">
              <el-row>
                <el-col :span="2">
                  <el-avatar :size="50" :src="c.avatar"></el-avatar>
                </el-col>
                <el-col :span="22">
                  <el-row>
                    <span id="contentUser" style="font-weight:600;"> {{ c.username }} </span>
                  </el-row>
                  <el-row style="margin-top: 8px;font-size: 16px;color:#676767;word-break: break-all;line-height: 28px">
                    {{ c.content }}
                  </el-row>
                  <el-row style="margin-top: 8px">
                      <span style="font-size: 14px; color: gray">{{
                          c.gmtCreate
                        }}</span>
                    <el-link style="margin-left: 8px" @click="parentComment(c.id)">
                      <span style="font-size: 14px">回复</span>
                    </el-link>
                    <el-col :span="20" v-if="c.id == beenParentCommentId">
                      <el-input type="textarea" placeholder="请输入内容..." v-model="commentParent" maxlength="120"
                                show-word-limit
                                style="font-size: 16px; width: 98%" resize="none">
                      </el-input>
                    </el-col>
                    <el-col :span="2" v-if="c.id == beenParentCommentId">
                      <el-button style="float: right; height: 60px; font-size: 16px" type="primary"
                                 @click="postComment(2)">
                        评论
                      </el-button>
                    </el-col>

                    <el-link style="margin-left: 8px"
                             @click="report(c)">
                      <span style="font-size: 14px">举报</span>
                    </el-link>

                    <el-dialog title="举报内容" :visible.sync="commentReport"
                               @close="feedbackForm={}">
                      <el-form :model="feedbackForm" ref="formComment" :rules="formCommentRules">
                        <el-form-item label="举报原因" :label-width="formLabelWidth">
                          <el-select v-model="feedbackForm.reason" placeholder="请选择举报原因">
                            <el-option label="涉政有害" value="涉政有害"></el-option>
                            <el-option label="不友善" value="不友善"></el-option>
                            <el-option label="网络暴力" value="网络暴力"></el-option>
                            <el-option label="违法违规" value="违法违规"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="举报内容" :label-width="formLabelWidth">
                          <el-input rows="9" type="textarea" v-model="feedbackForm.content"
                                    autocomplete="off"></el-input>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button size="medium" @click="commentReport = false">取 消</el-button>
                        <el-button size="medium" type="primary" @click="insertReport()">确 定</el-button>
                      </div>
                    </el-dialog>
                  </el-row>
                  <!-- 二级评论开始 -->
                  <div v-for="child in c.children" style="margin-top: 20px;position: relative;">
                    <el-row>
                      <el-col :span="2">
                        <el-avatar :size="45" :src="child.avatar">
                        </el-avatar>
                      </el-col>
                      <el-col :span="22">
                        <el-row>
                          <span style="font-weight:600;"> {{ child.username }} </span>
                          <span v-if="child.beenName != null"><i
                              class="el-icon-caret-right"/> {{ child.beenName }}</span>
                        </el-row>
                        <el-row
                            style="font-size: 16px;margin-top: 8px;color:#676767;word-break: break-all;line-height: 28px">
                          {{ child.content }}
                        </el-row>
                        <el-row style="margin-top: 8px">
                      <span style="font-size: 14px; color: gray">{{
                          child.gmtCreate
                        }}</span>
                          <el-link style="margin-left: 8px" @click="childComment(child.parentId,child.id)">
                            <span style="font-size: 14px">回复</span>
                          </el-link>
                          <el-col :span="20" v-if="child.id == childrenCommentId">
                            <el-input type="textarea" placeholder="请输入内容..." v-model="commentChildren" maxlength="120"
                                      show-word-limit
                                      style="font-size: 16px; width: 98%" resize="none">
                            </el-input>
                          </el-col>
                          <el-col :span="2" v-if="child.id == childrenCommentId">
                            <el-button style="float: right; height: 60px; font-size: 16px" type="primary"
                                       @click="postComment(3)">
                              评论
                            </el-button>
                          </el-col>

                          <el-link style="margin-left: 8px"
                                   @click="report(child)">
                            <span style="font-size: 14px">举报</span>
                          </el-link>
                        </el-row>
                      </el-col>
                    </el-row>
                  </div>
                  <el-divider></el-divider>
                </el-col>
              </el-row>
            </div>
          </div>

        </div>
      </div>

    </div>


  </el-container>


</template>


<script>

import MenuBar from "@/components/MenuBar";

export default {
  components: {MenuBar},
  data() {
    return {
      nationId: this.$route.query.nid,
      articleId: this.$route.query.id,
      article: {},
      currentNode: '',
      html: '',
      user: {},
      love: {},
      collect: {},
      isPressedLike: false,
      isPressedCollect: false,
      comment: '',
      updateArticle: {},
      comments: [],
      commentArticle: {},
      parentJudgeComment: false,
      beenParentCommentId: '',
      commentParent: '',
      childrenCommentId: '',
      commentChildren: '',
      beenId: '',
      beenParentCommentIdTemp: '',
      commentReport: false,
      feedbackForm: {},
      formLabelWidth: '120px',

      searchParams:{
        pageSize:10,
        pageNum:1,
        type:'',
      },

      formCommentRules: {
        feedbackReason: [
          {required: true, message: "请选择反馈原因", trigger: "blur"},
        ],
        feedbackContent: [
          {required: true, message: "请输入反馈内容", trigger: "blur"},
        ],
      },

      articles: [],
      loading:false,
    }
  },

  created() {

    console.log("nationId:", this.nationId);
    this.getArticle();
    this.getArticles();

  },

  methods: {
    getArticles() {
      this.loading = true;
      this.axios.get("/article/get-by-nation?id="+ this.nationId).then(({data}) => {
        if (data.state == 20000) {
          this.articles = data.data
          this.loading = false;
        } else {
          this.$message.error(data.message);
        }
      });
    },
    report(c) {
      console.log("c:", c);
      this.commentReport = true;
      this.feedbackForm.beenUserId = c.userId;
    },

    insertReport() {
      console.log("this.form", this.feedbackForm);
      this.axios.get("/feedback/insert-feedback", {
        params: this.feedbackForm
      }).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success("反馈成功");
          this.commentReport = false;
          this.$refs.formComment.resetFields();
          console.log("this.form", this.feedbackForm);

        } else {
          this.$message.error(data.message);
        }

      })


    },

    getCollectState() {
      this.axios.get("/collect/get-count?userId=" + this.user.id + '&articleId=' + this.article.id).then(({data}) => {
        if (data.state == 20000) {
          this.collect = data.data
          if (this.collect.length != 0) {
            this.isPressedCollect = true;
          }
        } else {
          this.$message.error(data.message);
        }

      })
    },
    getLoveState() {
      this.axios.get("/love/get-count?userId=" + this.user.id + '&loveId=' + this.article.id).then(({data}) => {
        if (data.state == 20000) {
          this.love = data.data
          if (this.love.length != 0) {
            this.isPressedLike = true;
          }
        } else {
          this.$message.error(data.message);
        }

      })
    },
    getCurrentUserInfo() {
      this.axios.get("/user/personal").then(({data}) => {
        if (data.state == 20000) {
          this.user = data.data
          this.getCollectState();
          this.getLoveState();
          this.getAllComments();
        } else {
          this.$message.error(data.message);
        }

      })
    },
    getArticle() {
      this.axios.get("/article/get-article-detail?id=" + this.articleId).then(({data}) => {
        if (data.state == 20000) {
          this.getCurrentUserInfo();
          this.article = data.data;
          this.html = data.data.content;
          document.getElementById('articleContent').innerHTML = this.html;

        } else {
          this.$message.error(data.message);
        }
      });
    },

    getAllComments() {
      this.axios.get("/comment/get-comment-by-id?id=" + this.articleId).then(({data}) => {
        if (data.state == 20000) {
          data.data.forEach((item) => {
            item.children = [];
            if (item.parentId == 0) {
              this.comments.push(item);
            }
          })

          data.data.forEach((item) => {
            this.comments.forEach((obj) => {
              if (item.parentId == obj.id) {
                obj.children.push(item);
              }
            })

          })


          console.log("comments:", this.comments);
        } else {
          this.$message.error(data.message);
        }
      });
    },
    goBack() {
      window.location.href = "/ethnic/synopsis?nid=" + this.nationId;

      console.log('go back');
    },

    pressLike() {
      this.updateArticle.id = this.article.id;
      this.updateArticle.userId = this.user.id;

      if (this.isPressedLike == false) {
        this.updateArticle.type = 1;
        this.article.loveCount = this.article.loveCount + 1;
        this.updateArticle.loveCount = this.article.loveCount;
        this.axios.post("/article/update-operate-by-key", this.updateArticle).then(({data}) => {
          if (data.state == 20000) {
            this.$message.success("已点赞");
          } else {
            this.$message.error(data.message);
          }
        })
        this.isPressedLike = true;
      } else {
        this.updateArticle.type = 2;
        this.article.loveCount = this.article.loveCount - 1;
        this.updateArticle.loveCount = this.article.loveCount;
        this.axios.post("/article/update-operate-by-key", this.updateArticle).then(({data}) => {
          if (data.state == 20000) {
            this.$message.success("已取消");
          } else {
            this.$message.error(data.message);
          }
        })
        this.isPressedLike = false;
      }
    },
    pressCollect() {
      this.updateArticle.id = this.article.id;
      this.updateArticle.userId = this.user.id;

      if (this.isPressedCollect == false) {
        this.updateArticle.type = 3;
        this.article.collectCount = this.article.collectCount + 1;
        this.updateArticle.collectCount = this.article.collectCount;
        this.axios.post("/article/update-operate-by-key", this.updateArticle).then(({data}) => {
          if (data.state == 20000) {
            this.$message.success("已收藏");
          } else {
            this.$message.error(data.message);
          }
        })
        this.isPressedCollect = true;
      } else {
        this.updateArticle.type = 4;
        this.article.collectCount = this.article.collectCount - 1;
        this.updateArticle.collectCount = this.article.collectCount;
        this.axios.post("/article/update-operate-by-key", this.updateArticle).then(({data}) => {
          if (data.state == 20000) {
            this.$message.success("已取消");
          } else {
            this.$message.error(data.message);
          }
        })
        this.isPressedCollect = false;
      }
    },

    // 发送评论
    postComment(flag) {
      if (flag == 1) {
        if (this.comment.length > 0) {
          this.axios.get("/comment/insert-comment", {
            params: {
              content: this.comment,
              userId: this.user.id,
              articleId: this.article.id
            }
          }).then(({data}) => {
            if (data.state == 20000) {
              location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
              this.$message.success("评论成功");
            } else {
              this.$message.error(data.message);
            }
          });
        } else {
          this.$message.error("评论内容不能为空");
        }

      } else if (flag == 2) {
        if (this.commentParent.length > 0) {
          this.axios.get("/comment/insert-comment", {
            params: {
              content: this.commentParent,
              userId: this.user.id,
              articleId: this.article.id,
              parentId: this.beenParentCommentIdTemp
            }
          }).then(({data}) => {
            if (data.state == 20000) {
              location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
              this.$message.success("评论成功");
            } else {
              this.$message.error(data.message);
            }
          });
        } else {
          this.$message.error("评论内容不能为空");
        }


      } else if (flag == 3) {
        if (this.commentChildren.length > 0) {
          this.axios.get("/comment/insert-comment", {
            params: {
              content: this.commentChildren,
              userId: this.user.id,
              articleId: this.article.id,
              parentId: this.beenId,
              beenId: this.childrenCommentId
            }
          }).then(({data}) => {
            if (data.state == 20000) {
              location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
              this.$message.success("评论成功");
            } else {
              this.$message.error(data.message);
            }
          });
        } else {
          this.$message.error("评论内容不能为空");
        }


      }
    },

    parentComment(item) {
      if (this.beenParentCommentId == item) {
        this.beenParentCommentId = '';
      } else {
        this.beenParentCommentId = item;
      }

      this.beenParentCommentIdTemp = item;
      console.log("id" + item)

      console.log("beenParentCommentId" + this.beenParentCommentIdTemp)
    },

    childComment(parentId, item) {
      this.beenId = parentId;

      if (this.childrenCommentId == item) {
        this.childrenCommentId = '';
      } else {
        this.childrenCommentId = item;
      }
      console.log("beenId", this.beenId)
      console.log("childrenCommentId", this.childrenCommentId)
    }
  },


}

</script>


<style>

.contextNation {
  font-size: 13px;
  color: #999;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.contextSynopsis {
  font-size: 13px;
  color: #999;
  overflow: hidden;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}



.size-icon {
  font-size: 25px;
}

.el-card__header {
  padding: 18px 20px;
  border-bottom: 1px solid #EBEEF5;
  box-sizing: border-box;
  height: 132px;
}


.el-tree-node__expand-icon {
  cursor: pointer;
  color: #C0C4CC;
  font-size: 12px;
  transform: rotate(0);
  transition: transform .3s ease-in-out;
  /*opacity: 0;*/
}


.el-tree-node__content {
  display: flex;
  align-items: center;
  height: 30px;
  cursor: pointer;
}

.el-tree-node__content:hover {
  background-color: #eff4fa;
  border-radius: 50px;
  height: 30px;
}

.el-tree-node.is-current > .el-tree-node__content {
  background-color: #ffffff !important;
  border-radius: 50px;
  color: #6183f6;
  font-size: 20px;
  height: 30px;
}

.tip {
  font-size: 15px;
  max-width: 200px;
  color: #2f2f2f;
}

.editor-content-view {
  /*border: 1px solid #ccc;*/
  border-radius: 5px;
  padding: 0;
  margin-top: 20px;
  overflow-x: auto;
}

.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap; /* 保留空格 */
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

.editor-content-view pre > code {
  display: block;
  padding: 10px;
}

.editor-content-view table {
  border-collapse: collapse;
}

.editor-content-view td,
.editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

.editor-content-view th {
  background-color: #f1f1f1;
}

.editor-content-view ul,
.editor-content-view ol {
  padding-left: 20px;
}

.editor-content-view img {
  width: 100%;
}

.editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}


</style>

